<template>
  <div class="history-box">
    <van-nav-bar
      title="历史"
      left-text="返回"
      left-arrow
      @click-left="handleToBack"
      fixed
      placeholder
    />
    <van-tabs
      v-model:active="active"
      scrollspy
      sticky
      offset-top="46"
      color="#1989fa"
      v-if="loading"
    >
      <van-tab title="段位">
        <div class="title">
          段位
        </div>
        <div class="content u-type-primary-light-bg" v-if="rankList.length > 0">
          <div
            class="u-m-b-10"
            v-for="item in rankList"
            :key="item.seasonRankId"
          >
            <van-tag round color="#3c8ce7" size="large"
              >第{{ item.seasonRankId }}赛季</van-tag
            >
            <van-row class="u-m-t-10">
              <van-col span="8">
                <div class="u-flex-col u-col-center">
                  <van-tag type="success" plain class="u-m-b-4">最高</van-tag>
                  <div class="u-relative" style="height:42px;">
                    <van-image
                      width="46px"
                      height="46px"
                      :src="
                        `https://www.opendota.com/assets/images/dota2/rank_icons/rank_icon_${
                          item.maxRank.toString()[0]
                        }.png`
                      "
                    />
                    <van-image
                      v-if="item.maxRank.toString()[1] !== '0'"
                      class="u-absolute u-top-0 u-left-0"
                      width="46px"
                      height="46px"
                      :src="
                        `https://www.opendota.com/assets/images/dota2/rank_icons/rank_star_${
                          item.maxRank.toString()[1]
                        }.png`
                      "
                    />
                  </div>
                  <span class="u-m-t-6 u-line-1 u-font-14">{{
                    formatRankTier(item.maxRank)
                  }}</span>
                </div>
              </van-col>
              <van-col span="8">
                <div class="u-flex-col u-col-center">
                  <van-tag type="danger" plain class="u-m-b-4">最低</van-tag>
                  <div class="u-relative" style="height:42px;">
                    <van-image
                      width="46px"
                      height="46px"
                      :src="
                        `https://www.opendota.com/assets/images/dota2/rank_icons/rank_icon_${
                          item.minRank.toString()[0]
                        }.png`
                      "
                    />
                    <van-image
                      v-if="item.minRank.toString()[1] !== '0'"
                      class="u-absolute u-top-0 u-left-0"
                      width="46px"
                      height="46px"
                      :src="
                        `https://www.opendota.com/assets/images/dota2/rank_icons/rank_star_${
                          item.minRank.toString()[1]
                        }.png`
                      "
                    />
                  </div>
                  <span class="u-m-t-6 u-line-1 u-font-14">{{
                    formatRankTier(item.minRank)
                  }}</span>
                </div>
              </van-col>
              <van-col span="8">
                <div class="u-flex-col u-col-center">
                  <van-tag type="primary" plain class="u-m-b-4">最终</van-tag>
                  <div class="u-relative" style="height:42px;">
                    <van-image
                      width="46px"
                      height="46px"
                      :src="
                        `https://www.opendota.com/assets/images/dota2/rank_icons/rank_icon_${
                          item.finallyRank.toString()[0]
                        }.png`
                      "
                    />
                    <van-image
                      v-if="item.finallyRank.toString()[1] !== '0'"
                      class="u-absolute u-top-0 u-left-0"
                      width="46px"
                      height="46px"
                      :src="
                        `https://www.opendota.com/assets/images/dota2/rank_icons/rank_star_${
                          item.finallyRank.toString()[1]
                        }.png`
                      "
                    />
                  </div>
                  <span class="u-m-t-6 u-line-1 u-font-14">{{
                    formatRankTier(item.finallyRank)
                  }}</span>
                </div>
              </van-col>
            </van-row>
          </div>
        </div>
        <van-empty
          v-else
          class="custom-image"
          image="https://iconfont.alicdn.com/t/ac84ab3c-93ea-4d28-8c40-7decb2a397de.png"
          image-size="200"
          description="没有找到相关数据"
        >
        </van-empty>
      </van-tab>
      <van-tab title="用户名">
        <div class="title">
          用户名
        </div>
        <div class="content u-type-primary-light-bg" v-if="nameList.length > 0">
          <div
            class="u-text-left u-p-10"
            v-for="item in nameList"
            :key="item.updateTime"
          >
            <div class="u-m-b-10 u-tips-color">{{ item.updateTime }}</div>
            <div
              class="u-font-24 u-content-color u-break-all"
              v-for="(item, index) in item.content"
              :key="index"
            >
              {{ item }}
            </div>
          </div>
        </div>
        <van-empty
          v-else
          class="custom-image"
          image="https://iconfont.alicdn.com/t/ac84ab3c-93ea-4d28-8c40-7decb2a397de.png"
          image-size="200"
          description="没有找到相关数据"
        >
        </van-empty>
      </van-tab>
    </van-tabs>
    <div class="card info-box u-flex u-row-center" style="height:100vh" v-else>
      <van-loading size="24px" vertical>加载中...</van-loading>
    </div>
  </div>
</template>
<script setup>
import { getPlayerHistory } from "@/api/player";
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { formatRankTier } from "@/utils/dotaHelper";
const router = useRouter();
const route = useRoute();
const loading = ref(false);
const handleToBack = () => {
  router.back();
};
let rankList = ref([]);
let nameList = ref([]);

const getMaxRank = (content) => {
  if (content.length > 0) {
    if (content.length === 1) {
      return content[0].rank;
    } else {
      let max = content[0].rank;
      content.forEach((item) => {
        if (item.rank > max) {
          max = item.rank;
        }
      });
      return max;
    }
  } else {
    return 0;
  }
};

const getMinRank = (content) => {
  if (content.length > 0) {
    if (content.length === 1) {
      return content[0].rank;
    } else {
      let max = content[0].rank;
      content.forEach((item) => {
        if (item.rank < max) {
          max = item.rank;
        }
      });
      return max;
    }
  } else {
    return 0;
  }
};

const getFinallyRank = (content) => {
  if (content.length > 0) {
    content.sort((a, b) => {
      return new Date(b.asOfDateTime) - new Date(a.asOfDateTime);
    });
    return content[0].rank;
  } else {
    return 0;
  }
};

const formatUpdateTime = (updateTime) => {
  return new Date(updateTime * 1000).toLocaleDateString().replaceAll("/", "-");
};

onMounted(() => {
  getPlayerHistory(route.params.account_id)
    .then((res) => {
      if (res.ranks && res.ranks.length > 0) {
        let _rankList = [];
        res.ranks.forEach((item) => {
          if (
            _rankList.find((rankItem) => {
              return rankItem.seasonRankId === item.seasonRankId;
            })
          ) {
            const index = _rankList.findIndex((rankItem) => {
              return rankItem.seasonRankId === item.seasonRankId;
            });
            _rankList[index].content.push({
              rank: item.rank,
              updateTime: item.asOfDateTime,
            });
          } else {
            _rankList.push({
              seasonRankId: item.seasonRankId,
              content: [
                {
                  rank: item.rank,
                  updateTime: item.asOfDateTime,
                },
              ],
            });
          }
        });
        _rankList.sort((a, b) => a.seasonRankId - b.seasonRankId);
        _rankList.forEach((item) => {
          rankList.value.push({
            seasonRankId: item.seasonRankId,
            maxRank: getMaxRank(item.content),
            minRank: getMinRank(item.content),
            finallyRank: getFinallyRank(item.content),
          });
        });
      }
      if (res.names && res.names.length > 0) {
        let _nameList = [];
        res.names.forEach((item) => {
          if (
            _nameList.find((nameItem) => {
              return (
                nameItem.updateTime === formatUpdateTime(item.lastSeenDateTime)
              );
            })
          ) {
            const index = _nameList.findIndex((nameItem) => {
              return (
                nameItem.updateTime === formatUpdateTime(item.lastSeenDateTime)
              );
            });
            _nameList[index].content.push(item.name);
          } else {
            _nameList.push({
              content: [item.name],
              updateTime: formatUpdateTime(item.lastSeenDateTime),
            });
          }
        });
        nameList.value = _nameList;
      }
      loading.value = true;
    })
    .catch(() => {
      loading.value = true;
    });
});
</script>
<style lang="scss" scoped>
.history-box {
  .title {
    text-align: left;
    padding: 10px;
    background-image: linear-gradient(135deg, #3c8ce7 10%, #00eaff 100%);
    color: #fff;
  }
  .content {
    padding: 10px;
  }
}
</style>
